<template>
	<div class="max" style="background: rgb(245, 245, 245);">
		<my-header v-if="access!=='kinsfolk'" :backBtn="true">
			<div slot="right" @click="showFootHandle = true" v-if="!showFootHandle">
				选择
			</div>
			<div slot="right" @click="hideFoot" v-if="showFootHandle">
				取消
			</div>
		</my-header>
		<my-header v-else></my-header>
		<div class="cont-nof daily-box" :class="{cont:showFootHandle||access==='kinsfolk'}">
			<div class="item addDaily flex" v-if="!showFootHandle&&access!=='kinsfolk'">
				<my-select :option="option" @on-change="change">+</my-select>
			</div>
			<div class="item pr" v-for="item in list">
				<div class="weui-cells weui-cells_checkbox daily-select pa" v-if="showFootHandle" style="background: none; right: 0;">
					<label class="weui-cell weui-check__label my-weui-cell-select" style="background: none;">
						<div class="weui-cell__hd my-weui-cell__hd">
							<input type="checkbox" class="weui-check" v-model="item.isSelect" @click="selectItem(item)">
							<i class="weui-icon-checked"></i>
						</div>
					</label>
				</div>
				<div @click="jump(item)">
					<div class="daily-cover">
						<img :src="item.frontCover" alt="">
					</div>
					<div class="daily-content tl">{{item.title}}</div>
					<div class="tr more">{{item.createTime}}</div>
				</div>
			</div>
		</div>
		<div class="flex footHandle" v-if="showFootHandle">
			<div class="weui-cells weui-cells_checkbox select-all fl" style="margin-top: 0;width: auto;margin: inherit;">
				<label class="weui-cell weui-check__label my-weui-cell-select">
					<div class="weui-cell__bd" style="margin-right: 1rem;">
						<p class="select-text" style="white-space: nowrap;">全选</p>
					</div>
					<div class="weui-cell__hd my-weui-cell__hd">
						<input type="checkbox" class="weui-check" v-model="isSelectAll" @click="selectAll">
						<i class="weui-icon-checked"></i>
					</div>
				</label>
			</div>
			<div>
				<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn fr" @click="delFn">删除</a>
			</div>
		</div>
		<my-foot tab="/classDaily" v-if="access==='kinsfolk'"></my-foot>
	</div>
</template>

<script>
	import mySelect from '@/components/select.vue'
	import myFoot from '@/components/Footer.vue'
	import wx from "weixin-js-sdk";

	export default {
		components: {
			myFoot,
			mySelect
		},
		data() {
			return {
				params: {
					current: 1,
					size: 10,
					pages: 0
				},
				access: '',
				option: {
					value: '+',
					type: 'picker',
					data: [{
						label: '视频',
						value: 'video'
					}, {
						label: '图片',
						value: 'image'
					}],
					style: {
						background: 'none',
						fontSize: '8rem',
						color: '#A3A3A3',
					}
				},
				showFootHandle: false,
				isSelectAll: false,
				isSelectNum: 0,
				list: []
			}
		},
		methods: {
			change(item) {
				this.$router.push({
					path: '/addDaily',
					query: item[0]
				})
			},
			selectAll() { //全选
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].isSelect = !this.isSelectAll;
				}!this.isSelectAll ? this.isSelectNum = this.list.length : this.isSelectNum = 0;
			},
			selectItem(item) { //单选
				item.isSelect = !item.isSelect;
				item.isSelect ? this.isSelectNum++ : this.isSelectNum--
				this.isSelectNum === this.list.length ? this.isSelectAll = true : this.isSelectAll = false;
			},
			hideFoot() { //取消
				this.showFootHandle = false;
				this.isSelectAll = false;
				this.isSelectNum = 0;
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].isSelect = false;
				}
			},
			delFn() { //删除动态
				let ids = this.list.filter(file => file.isSelect).map(file => file.id).join(",");
				if (!ids) {
					this.$weui.topTips('请选择动态');
					return;
				}
				this.$http.deleteTrendy({
					ids: ids
				}).then(resp => {
					this.$weui.toast('删除成功');
					this.showFootHandle = false;
					this.isSelectAll = false;
					this.queryFn();
					// for (let i = 0; i < this.list.length; i++) {
					// 	if (this.list[i].isSelect) {
					// 		this.list.splice(i, 1)
					// 		i--;
					// 	}
					// }
				})
			},
			jump(item) {
				console.log(item);
				if (item.type === 'video') {
					this.$router.push({
						path: '/dailyContent',
						query: item
					})
				} else {
					let urls = item.fileList.map(file => file.url);
					wx.previewImage({
						previewImage: urls[0],
						urls: urls
					})
				}
			},
			queryFn() {
				this.$http.fetchTrendy(this.params).then(resp => {
					let data = resp.data;
					this.params.current = data.current;
					this.params.size = data.size;
					this.params.pages = data.pages;
					this.list = data.records;
				})
			},
			getWxConfig() {
				let url = window.location.href;

				let _this = this;
				_this.$http.fetchWxConfig({
					url: url
				}).then(resp => {
					wx.config({
						// debug: true,
						appId: resp.data.appId,
						timestamp: resp.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: resp.data.noncestr, // 必填，生成签名的随机串
						signature: resp.data.sign, // 必填，签名
						jsApiList: ['previewImage'] // 必填，需要使用的JS接口列表
					});
				})
			},
		},
		mounted() {
			this.queryFn();
			this.getWxConfig();
		},
		created() {
			this.access = this.$Cookies.get('loginType');
		}
	}
</script>

<style scoped>
	.daily-box {
		padding: 0.5rem;
		box-sizing: border-box;
	}

	.addDaily {
		height: 25rem;
	}
	
	.root {
		width: 100%;
	}

	.item {
		float: left;
		width: 50%;
		height: 23rem;
		margin-bottom: 0.1rem;
		padding: 1rem 0.5rem;
		border: 1px solid #ccc;
		box-sizing: border-box;
	}

	.daily-cover {
		width: 100%;
		height: 12rem;
		overflow: hidden;
		background: #000000;
	}

	.daily-cover img {
		width: 100%;
		height: auto;
	}

	.daily-content {
		overflow: hidden;
		font-size: 1.4rem;
		margin: 1rem 0;
		height: 5rem;
	}

	.footHandle {
		background: #fff;
		height: 4.4rem;
		justify-content: space-between;
		padding: 0 1rem;
		box-sizing: border-box;
	}
</style>
